@import url(./variable.less);

page,
view,
input,
button,
textarea,
scroll-view {
  box-sizing: border-box;
}

page {
  // 常规
  --color-primary   : @colorPrimary;
  --color-primary-bg: @colorPrimaryBg;

  // 错误
  --color-error        : @colorError;
  --color-error-bg     : @colorErrorBg;
  --color-error-shallow: #fd434310;

  // 成功
  --color-success        : @colorSuccess;
  --color-success-bg     : @colorSuccessBg;
  --color-success-shallow: rgba(29, 186, 110, 0.1);

  // 警告
  --color-warning   : @colorWarning;
  --color-warning-bg: @colorWarningBg;

  // 警告
  --color-info   : @colorInfo;
  --color-info-bg: @colorInfoBg;

  // 字体颜色
  --color-text-theme : @colorTextTheme;
  --color-text-main  : @colorTextBase;
  --color-text-second: @colorTextSecond;
  --color-text-third : @colorTextThird;

  // boder
  --color-line-light: @colorLineLight;

  // 背景
  --color-page: @colorPage;


  // 字体大小
  --size-text-xs  : @sizeTextXs;
  --size-text-sm  : @sizeTextSm;
  --size-text-base: @sizeTextBase;
  --size-text-lg  : @sizeTextLg;
  --size-text-xl  : @sizeTextXl;

  --color-bg-base: @colorBgBase;

  font-size    : var(--size-text-base);
  background   : var(--color-bg-base);
  // background: #fff;
}

.safe-footer {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.flex-center {
  display        : flex;
  align-items    : center;
  justify-content: center;
}


// .align-justify {
//   text-align     : justify;
//   text-align-last: justify;
// }


button:not([size=mini]) {
  width: unset;
}

button[disabled] {
  background: var(--color-primary);
  opacity   : 1;
  // color: ;
}

.ellipsis {
  min-width    : 0;
  overflow     : hidden;
  white-space  : nowrap;
  text-overflow: ellipsis;
}

// .clamp-2 {
//   overflow          : hidden; // 超出的文本隐藏
//   text-overflow     : ellipsis; // 溢出用省略号显示
//   display           : -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
//   -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
//   -webkit-box-orient: vertical;
//   word-break        : break-all;
// }

.line-clamp {
  overflow             : hidden; // 超出的文本隐藏
  text-overflow        : ellipsis; // 溢出用省略号显示
  // display           : -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
  // -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
  -webkit-box-orient   : vertical;
  word-break           : break-all;
}